<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>客服列表</title>
    <script>
        ROOT_URL = '{:request()->root()}';
    </script>
    <link rel="stylesheet" href="__libs__/layui/css/layui.css?v=__lkversion__">
    <script type="text/javascript" src="__libs__/jquery/jquery.min.js?v=__lkversion__"></script>
    <script src="__libs__/layer/layer.js?v=__lkversion__" type="text/javascript"></script>
    <style>
        .layim-msgbox li {
            padding: 0 24px;
            height: 80px;
        }

        .layim-msgbox .layim-msgbox-tips {
            margin: 0;
            padding: 10px 0;
            border: none;
            text-align: center;
            color: #999;
        }

        .layim-msgbox .layim-msgbox-system {
            padding: 0 10px 10px 10px;
        }

        .layim-msgbox li p span {
            padding-left: 5px;
            color: #999;
        }

        .layim-msgbox li p em {
            font-style: normal;
            color: #FF5722;
        }

        .layim-msgbox-avatar {
            margin-top: 17px;
            height: 46px;
            width: 46px;
            float: left;
            margin-right: 16px;
        }

        .layim-msgbox-user {
            height: 80px;
            line-height: 80px;
            display: inline-block;
            color: #555555;
            width: 50%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .layim-msgbox-content {
            margin-top: 3px;
        }

        .layim-msgbox .layui-btn-small {
            padding: 0 15px;
            margin-left: 5px;
        }

        .layim-msgbox-btn {
            float: right;
            margin-top: 24px;
            height: 32px;
            line-height: 32px;
            width: 66px;
            border-radius: 16px;
            background-color: #1E9FFF;
            color: #fff;
            text-align: center;
            cursor: pointer;
        }

        .layim-msgbox-btn.layui-btn-disabled {
            background-color: #dddddd;
        }

        .icon_gray {
            -webkit-filter: grayscale(100%);
            -ms-filter: grayscale(100%);
            filter: grayscale(100%);
            filter: gray;
        }
    </style>
</head>
<body>

<ul class="layim-msgbox" id="LAY_view">

    {if $service}

    {foreach $service as $se}
    <li>
        {if $se.is_online == 1}
        <a>
            <img src="{$se.avatar_url}" class="layui-circle layim-msgbox-avatar icon_gray">
        </a>
        <span class="layim-msgbox-user">
                <a>{$se.nickname}</a>
            </span>
        <button class="layui-btn layim-msgbox-btn layui-btn-disabled">转接</button>
        {else}
        <a>
            <img src="{$se.avatar_url}" class="layui-circle layim-msgbox-avatar">
        </a>
        <span class="layim-msgbox-user">
                <a>{$se.nickname}</a>
            </span>
        <button class="layui-btn layim-msgbox-btn "  onclick='switchCustomer({$se.id},this)'>转接</button>
        {/if}
    </li>
    {/foreach}

    {else}
    <div class="layui-flow-more">
        <li class="layim-msgbox-tips">暂无其他客服</li>
    </div>
    {/if}

</ul>

<script src="__libs__/layui/layui.js?v=__lkversion__"></script>
<script>

    var switchCustomer = function(id,that){

        console.log(id)
        $.ajax({
            url:"{:url('switch')}",
            type:'post',
            data:{
                id:id,
                visitor_id:'{$visitor_id}',
            },
            dataType:'json',
            success:function(res){
                if(res.code == 0){
                    $(that).addClass('layui-btn-disabled');
                    layer.msg(res.message,{end:function(){
                            parent.getChats();
                            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                            parent.layer.close(index);
                        }});

                }
            }
        });


    }

</script>
</body>
</html>
